/*
 * @Author: xyq
 * @Date: 2021-02-22 14:53:42
 * @LastEditors: xyq
 * @LastEditTime: 2021-03-05 09:44:31
 * @FilePath: \little-eight\src\Component\pageTemplate\index.jsx
 */
import React from 'react';
import '../../css/Home.css';
import { Layout, Button, Menu, Dropdown } from 'antd';
import Cookie from 'js-cookie';
import { MenuUnfoldOutlined, MenuFoldOutlined, FullscreenOutlined } from '@ant-design/icons';
import { withRouter } from 'react-router-dom';
import SiderNav from '../Sider/index';
import Home from '../../pages/Main/Home/index';
import PersonManage from '../../pages/Main/System/personManage';
import MenuManage from '../../pages/Main/System/menuManage';
import DepartmentManage from '../../pages/Main/System/departmentManage';
import ProjectList from '../../pages/Main/Project/projectList';
import ProjectStatements from '../../pages/Main/Project/projectStatements';
import ApproveList from '../../pages/Main/MoneyManage/approveList';
import ApproveDetail from '../../pages/Main/MoneyManage/approveDetail';
const { Header, Content } = Layout;
class PageTemplate extends React.Component {
  state = {
    collapsed: false,
  };
  toggle = () => {
    this.setState(x => {
      return (x.collapsed = !x.collapsed);
    });
  };
  renderConts = () => {
    switch (this.props.conts) {
      case 'Home':
        return <Home></Home>;
      case 'personManage':
        return <PersonManage></PersonManage>;
      case 'menuManage':
        return <MenuManage></MenuManage>;
      case 'departmentManage':
        return <DepartmentManage></DepartmentManage>;
      case 'projectList':
        return <ProjectList></ProjectList>;
      case 'projectStatements':
        return <ProjectStatements></ProjectStatements>;
      case 'approveList':
        return <ApproveList></ApproveList>;
      case 'approveDetail':
        return <ApproveDetail></ApproveDetail>;
      default:
        break;
    }
  };
  quit = () => {
    this.props.history.push('/Login');
  };
  menu = () => {
    return (
      <Menu>
        <Menu.Item>
          <a onClick={this.quit}>退出登录</a>
        </Menu.Item>
        <Menu.Item>
          <Dropdown overlay={this.close} placement="bottomLeft">
            <span>设置表格按钮皮肤</span>
          </Dropdown>
        </Menu.Item>
      </Menu>
    );
  };
  close = () => {
    return (
      <Menu>
        <Menu.Item>
          <span
            style={{ width: '90px', height: '20px' }}
            className="button-color-dust block"
            onClick={this.setBtn.bind(this, 'button-color-dust')}
          ></span>
        </Menu.Item>
        <Menu.Item>
          <span
            style={{ width: '90px', height: '20px' }}
            className="button-color-volcano block"
            onClick={this.setBtn.bind(this, 'button-color-volcano')}
          ></span>
        </Menu.Item>
        <Menu.Item>
          <span
            style={{ width: '90px', height: '20px' }}
            className="button-color-sunset block"
            onClick={this.setBtn.bind(this, 'button-color-sunset')}
          ></span>
        </Menu.Item>
        <Menu.Item>
          <span
            style={{ width: '90px', height: '20px' }}
            className="button-color-cyan block"
            onClick={this.setBtn.bind(this, 'button-color-cyan')}
          ></span>
        </Menu.Item>
        <Menu.Item>
          <span
            style={{ width: '90px', height: '20px' }}
            onClick={this.setBtn.bind(this, 'button-color-green')}
            className="button-color-green block"
          ></span>
        </Menu.Item>
        <Menu.Item>
          <span
            style={{ width: '90px', height: '20px' }}
            onClick={this.setBtn.bind(this, 'button-color-daybreak')}
            className="button-color-daybreak block"
          ></span>
        </Menu.Item>
        <Menu.Item>
          <span
            style={{ width: '90px', height: '20px' }}
            onClick={this.setBtn.bind(this, 'button-color-geekblue')}
            className="button-color-geekblue block"
          ></span>
        </Menu.Item>
        <Menu.Item>
          <span
            style={{ width: '90px', height: '20px' }}
            onClick={this.setBtn.bind(this, 'button-color-purple')}
            className="button-color-purple block"
          ></span>
        </Menu.Item>
      </Menu>
    );
  };
  setBtn = val => {
    Cookie.set('btnColor', val);
  };
  render() {
    return (
      <Layout>
        <SiderNav collapsed={this.state.collapsed} suffix={this.props.conts}></SiderNav>
        <Layout className="site-layout clear">
          <Header className="site-layout-background" style={{ padding: 0 }}>
            {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: this.toggle,
            })}
            <Dropdown overlay={this.menu} placement="bottomLeft" arrow>
              <FullscreenOutlined className="marLeft" style={{ fontSize: '20px' }} />
            </Dropdown>
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
            }}
          >
            {this.renderConts()}
          </Content>
        </Layout>
      </Layout>
    );
  }
  componentDidMount() {
    console.log('进来了');
  }
}
export default withRouter(PageTemplate);
